<template>
    <div class="addSpecialTableItem">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" :disabled="props.isView">
            <el-row :gutter="24">
                <el-col :span="6" :offset="0" class="FormItem">
                    <el-form-item label="选择球队" prop="cardTeamId">
                        <el-select v-model="form.cardTeamId" placeholder="请选择球队" clearable filterable
                            @change="getPlayerByTeam">
                            <el-option v-for="item in props.teamList" :key="item.cardTeamId"
                                :label="item.teamChineseName" :value="item.cardTeamId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0" class="FormItem">
                    <el-form-item label="选择球员" prop="cardPlayerId">
                        <el-select v-model="form.cardPlayerId" placeholder="请选择球员" clearable filterable
                            @focus="getPlayerByTeam" @change="getCardMIByPlayer">
                            <el-option v-for="item in playerList" :key="item.id" :label="item.playerChineseName"
                                :value="item.cardPlayerId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0" class="FormItem">
                    <el-form-item label="选择卡密" prop="winCarmiId">
                        <el-select v-model="form.winCarmiId" placeholder="请选择卡密" @change="getCarmiInfo"
                            @focus="getCardMIByPlayer" style="width: 100%;" filterable clearable>
                            <el-option v-for="item in cardMilist" :key="item.id" :label="item.carmiInfo"
                                :value="item.id" :disabled="getSame(item.id)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0" class="FormItem">
                    <el-form-item label="特殊内容" prop="winCarmiDescribe">
                        <el-input v-model="form.winCarmiDescribe" type="textarea" :rows="1" :maxlength="50"
                            show-word-limit placeholder="请输入特殊卡密内容(不输入默认球员中文名)"
                            @change="emit('update:modelValue', form)" />
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="0" class="FormItem">
                    <el-form-item label="卡密颜色" prop="carmiColor">
                        <el-select v-model="form.carmiColor" placeholder="请选择特殊卡密颜色" clearable filterable @change="emit('update:modelValue', form);
                        ">
                            <el-option v-for="item in special_colour" :key="item.value" :label="item.label"
                                :value="item.value">
                                <span :style="'color: ' + item.value">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4" :offset="0">
                    <el-popconfirm title="确定要删除特殊卡密吗？" icon-color="red" @confirm="carmiListHandle()">
                        <template #reference>
                            <el-button type="danger" icon="delete" circle></el-button>
                        </template>
                    </el-popconfirm>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang='ts' setup>
const { proxy } = getCurrentInstance()
const { special_colour } = toRefs<any>(proxy?.useDict('special_colour'));
import { getCarmiGroupByType } from '@/api/workflow/category/index'
import { TeamListItem } from '@/api/workflow/category/types';
import { mode } from 'crypto-js';
interface FormType {
    id?: any;
    cardCollageId?: any;
    cardCollageCode?: any;
    carmiColor?: any;
    winCarmiId?: any;
    winCarmiDescribe?: any;
    cardTeamId?: any;
    carmiProperty?: any;
    carmiInfo?: any;
    cardPlayerId?: any;
    cardTeamName?: any,
    playerName?: any,
}

const emit = defineEmits(['del', 'update:modelValue'])
const cardCategoryId = ref()
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => { },
    },
    cardCategoryId: {
        type: [String, Number],
        default: ''
    },
    teamList: {
        type: Array as PropType<TeamListItem[]>,
        default: () => []
    },
    itemInfo: {
        type: Object as PropType<FormType>,
        default: () => ({
            id: undefined,
            cardCollageId: undefined, //拼团id
            cardCollageCode: undefined, //拼团编码
            carmiColor: undefined, //卡密颜色
            winCarmiId: undefined, //特殊卡密
            winCarmiDescribe: undefined, //特殊卡密描述
            cardTeamId: undefined, //球队id
            carmiProperty: undefined, //卡密属性
            carmiInfo: undefined, //卡密属性
            cardPlayerId: undefined, //球员id
            cardTeamName: undefined,
            playerName: undefined,
        })
    },
    teamTreeArray: {
        type: Array,
        default: () => []
    },
    selectEdTeam: {
        type: Array,
        default: () => []
    },
    isView: {
        type: Boolean,
        default: false
    }
})

const data = reactive({
    form: {
        id: undefined,
        cardCollageId: undefined, //拼团id
        cardCollageCode: undefined, //拼团编码
        carmiColor: undefined, //卡密颜色
        winCarmiId: undefined, //特殊卡密
        winCarmiDescribe: undefined, //特殊卡密描述
        cardTeamId: undefined, //球队id
        carmiProperty: undefined, //卡密属性
        carmiInfo: undefined, //卡密属性
        cardPlayerId: undefined, //球员id
        cardTeamName: undefined,
        playerName: undefined,
    },
    rules: {
        cardTeamId: [
            { required: true, message: '请选择球队', trigger: 'blur' }
        ],
        cardPlayerId: [
            { required: true, message: '请选择球员', trigger: 'blur' }
        ],
        winCarmiId: [
            { required: true, message: '请选择卡密', trigger: 'blur' }
        ],
        carmiColor: [
            { required: true, message: '请选择卡密颜色', trigger: 'blur' }
        ],
    },
})

const { form, rules } = toRefs(data)
const formRef = ref()
const playerList = ref<any>([])
const cardMilist = ref<any>([])
const carmiListHandle = () => {
    emit('del',)
}
const getPlayerByTeam = (e: any) => {
    if (Object.prototype.toString.call(e) === '[object Number]' || Object.prototype.toString.call(e) === '[object Undefined]') {
        form.value.cardPlayerId = undefined
        form.value.winCarmiId = undefined
        playerList.value = []
        cardMilist.value = []
    }

    if (form.value.cardTeamId !== '' && form.value.cardTeamId !== null && form.value.cardTeamId !== undefined) {
        const query = {
            cardCategoryId: cardCategoryId.value,
            type: 2,
            cardTeamId: form.value.cardTeamId,
        }
        getCarmiGroupByType(query).then(res => {
            playerList.value = res.data
        })
    }
    emit('update:modelValue', form.value);
}
const getCardMIByPlayer = (e: any) => {
    if (Object.prototype.toString.call(e) === '[object Number]' || Object.prototype.toString.call(e) === '[object Undefined]') {
        form.value.winCarmiId = undefined
        cardMilist.value = []
    }

    if (form.value.cardPlayerId !== '' && form.value.cardPlayerId !== null && form.value.cardPlayerId !== undefined) {
        const query = {
            cardCategoryId: cardCategoryId.value,
            type: 3,
            cardTeamId: form.value.cardTeamId,
            playerId: form.value.cardPlayerId
        }
        getCarmiGroupByType(query).then(res => {
            cardMilist.value = res.data
        })
    }
    emit('update:modelValue', form.value);
}
const getCarmiInfo = () => {
    let row = cardMilist.value.find((item: any) => {
        return item.id == form.value.winCarmiId
    })
    form.value.winCarmiDescribe = row.playerChineseName
    form.value.carmiProperty = row.cardCategoryProperty
    form.value.carmiInfo = row.carmiInfo
    form.value.cardTeamName = row.teamChineseName
    form.value.playerName = row.playerChineseName
    emit('update:modelValue', form.value)
}

const getSame = (id: any) => {
    let flag = false
    props.selectEdTeam.forEach((item: any) => {
        if (item.winCarmiId == id && id !== form.value.winCarmiId) {
            return flag = true
        }
    })
    return flag
}

watch(() => props.itemInfo, (val) => {
    console.log(val);
    console.log(playerList.value);
    if (val.cardPlayerId) {
       if(playerList.value.length == 0){
            playerList.value = [
                {
                    cardPlayerId: val.cardPlayerId,
                    playerChineseName: val.playerName
                }
            ]
       }
    } else {
        playerList.value = []
    }
    if (val.winCarmiId) {
        cardMilist.value = [
            {
                id: val.winCarmiId,
                carmiInfo: val.carmiInfo,
                cardCategoryProperty: val.carmiProperty
            }
        ]
    } else {
        cardMilist.value = []
    }
    form.value = { ...val };
}, {
    deep: true,
    immediate: true,
})
watch(() => props.cardCategoryId, (val) => {
    cardCategoryId.value = props.cardCategoryId
}, {
    deep: true,
    immediate: true,
})
watch(() => props.selectEdTeam, (val) => {

}, {
    deep: true,
    immediate: true,
})
defineExpose(
    {
        formRef,
        form,
    }
)

</script>
<style lang="scss" scoped>
.FormItem {
    margin-bottom: 20px;
}

.addSpecialTableItem {
    width: 100%;
}
</style>
